<template>
	<view class="notice">
		<Loading v-if="loading">正在加载中</Loading>
		<template v-else>
			<EmptyWarn v-if="notices.length === 0">暂时没有通知</EmptyWarn>
			<NoticeList v-for="(noticeDate,index) in processedNotices" :key="index" :noticeDate="noticeDate" @confirmNotice="refreshNotices"  v-else></NoticeList>
		</template>
	</view>
</template>

<script>
	import NoticeList from "./components/NoticeList.vue"
	import Loading from "@/components/Loading/Loading.vue"
	import EmptyWarn from "@/components/EmptyWarn/EmptyWarn.vue"
	import * as NoticeApi from "@/api/notice/notice.js"
	import {dateFormat,timeFormat} from "@/utils/util.js"
	import {NOTICE} from "@/core/constant/WebSocketEvent.js"
	export default {
		components:{
			NoticeList,
			Loading,
			EmptyWarn
		},
		data() {
			return {
				loading:true,
				notices:[],
				processedNotices:[],
				total:0,
			}
		},
		methods: {
			async getNoticeList(){
				this.loading = true
				const data = await NoticeApi.noticeList()
				this.notices = data.noticeTravelList
				this.processedNotices = this.proccessNotices(this.notices)
				this.total = data.total
				this.loading = false
			},
			proccessNotices(notices){
				const tmpNotices = []
				for(const notice of notices){
					// 根据日期进行分流
					const noticeDate = new Date(notice.createTime)
					const noticeDateStr = dateFormat("mm月dd日",noticeDate)
					if(tmpNotices.length === 0){ 
						tmpNotices.push({noticeDate,noticeDateStr,list:[notice]})
						continue
					}
					else if(noticeDate.getDate() === tmpNotices[tmpNotices.length-1].noticeDate.getDate()){
						tmpNotices[tmpNotices.length-1].list.push(notice)
					}else{
						tmpNotices.push({noticeDate,noticeDateStr,list:[notice]})
					}
				}
				return tmpNotices
			},
			refreshNotices(noticeId){
				const index = this.notices.findIndex(notice =>notice.id === noticeId)
				this.notices[index].isRead = 1
				this.processedNotices = this.proccessNotices(this.notices)
			},
			handleOnNotice(data){
				this.notices.splice(0,1,data)
				this.processedNotices = this.proccessNotices(this.notices)
			}
		},
		onShow(){
			this.$navTo("pages/index/index")
		},
		async onLoad(){
			
			// uni.$on(NOTICE,(data) => {
			// 	console.log("--------NOTICE------")
			// 	this.handleOnNotice(data)
			// })
			// await this.getNoticeList()
		}
	}
</script>

<style lang="scss">
	page{
		width:100%;
		background:#fff;
		height:100%;
	}
	.text--main-dark{
		font-size: 24px;
		font-weight: 700;
		color:#333;
	}
	
	.text--secondary-dark{
		font-size: 16px;
		font-weight: 700;
		color:#333;
	}
	
	
	.notice{
		height: 100vh;
		width:600rpx;
		margin: auto;
		overflow: scroll;
	}
	
	

</style>
